<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ page isELIgnored="false" %>
<%
    String path = request.getContextPath();
%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>李宁体育管理系统</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="<%=path%>/css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
    <link href="<%=path%>/css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">
    <link href="<%=path%>/css/style.min862f.css?v=4.1.0" rel="stylesheet">
    <link href="<%=path%>/css/plugins/chosen/chosen.css" rel="stylesheet">
    <link href="<%=path%>/css/plugins/iCheck/custom.css" rel="stylesheet">
    <link href="<%=path%>/css/plugins/ionRangeSlider/ion.rangeSlider.css" rel="stylesheet">
    <link href="<%=path%>/css/plugins/ionRangeSlider/ion.rangeSlider.skinFlat.css" rel="stylesheet">
    <link href="<%=path%>/css/plugins/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css"
          rel="stylesheet">
    <link href="<%=path%>/css/animate.min.css" rel="stylesheet">
    <link href="<%=path%>/umeditor/themes/default/css/umeditor.css" type="text/css" rel="stylesheet">
    <link href="<%=path%>/css/style.min862f.css?v=4.1.0" rel="stylesheet">
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>修改报名活动</h5>
                </div>
                <div class="ibox-content">
                    <form class="form-horizontal m-t"  id="vipActivityForm" onsubmit="saveAllTage()">
                        <div class="form-group">
                                  <input type="hidden" class="form-control" name="id" id="id" value="${apply.id }" maxlength="20" placeholder="活动名称"></input>
									<div class="form-group">
									    <label class="col-sm-2 control-label">活动名称</label><font color="red">*</font>
									    <div class="col-sm-3">
											<input type="text" class="form-control" name="title" id="title" value="${apply.title }" maxlength="20" placeholder="活动名称"></input>
									    </div>
									    <span id="error_title" style="color: red"></span>
									</div>
									<div class="form-group">
										<label class="col-sm-2 control-label">开始时间</label><font color="red">*</font>
										<div class="col-sm-3">
											<input type="text" class="form-control" name="beginTime" id="beginTime" value="<fmt:formatDate value="${apply.beginTime}" pattern="yyyy-MM-dd HH:mm:ss"/>" placeholder="开始时间"></input>
										</div>
										<span id="error_beginTime" style="color: red"></span>
									</div>
									<div class="form-group">
										<label class="col-sm-2 control-label">结束时间</label><font color="red">*</font>
										<div class="col-sm-3">
											<input type="text" class="form-control" name="endTime" id="endTime" value="<fmt:formatDate value="${apply.endTime}" pattern="yyyy-MM-dd HH:mm:ss"/>" placeholder="结束时间"></input>
										</div>
										<span id="error_endTime" style="color: red"></span>
									</div>
									<div class="form-group">
										<label class="col-sm-2 control-label">活动地点</label><font color="red">*</font>
										<div class="col-sm-3">
											<input type="text" class="form-control" name="address" id="address" value="${apply.address }" placeholder="地址" maxlength="150"></input>
										</div>
										<span id="error_address" style="color: red"></span>
									</div>
									<div class="form-group">
									    <label class="col-sm-2 control-label">活动状态</label><font color="red">*</font>
										     <div class="col-sm-3">
											<select data-placeholder="状态" name="state"
												style="width: 250px;" class="chosen-select" tabindex="2">
												<option value="0" selected>进行中</option>
												<option value="1"<c:if test="${apply.state ==1}">selected</c:if>>已结束</option>
											</select>
											</div>
									</div>
									<div class="form-group">
										<label class="col-sm-2 control-label">活动人数</label><font color="red">*</font>
										<div class="col-sm-3">
											<input type="number" class="form-control" name="joinNum" id="joinNum" value="${apply.joinNum }" placeholder="人数" maxlength="150"></input>
										</div>
										<span id="error_joinNum" style="color: red"></span>
									</div>
									<input id="picture" name="picture" type="file" 
											title="图片" placeholder="图片" onchange="validateImg();" style="display: none;"/> 
											<span id="imgHint" style="color: red"></span>
									<div class="form-group" style="margin-left: 160px">
									<div class="col-sm-1 control-label">
										<a class="btn btn-info"
											onclick="$('input[id=picture]').click();">选择海报</a>
									</div>
									<div class="col-sm-3" style="margin-left: 20px;margin-top:10px">
										<input id="headPortrait" name="headPortrait"
											class="input-large form-control" value="${apply.headPortrait }" maxlength="150" type="text"
											style="height: 30px;">
									</div>
										<div class="file-box">
										<div class="file">
											<a> <span class="corner"></span>
												<div class="image">
													<img id="imgx" alt="" class="img-responsive" src="${apply.headPortrait }"
														style="width: 100%; height: 100%">'+
												</div>
											</a>
										</div>
									</div>
									<span id="error_headPortrait" style="color: red"></span>
								</div>
								
									<input type="hidden" class="form-control"  id="toSaveTagName"  name="toSaveTagName" value="" placeholder="选项" maxlength="10"></input>
									<div class="form-group">
										<label class="col-sm-2 control-label">活动详情</label>
										<div class="col-sm-8">
										    <script type="text/plain" id="details" name="details" style="width:100%; height:150px">${apply.description}</script>
										</div>
									</div>	
									<div class="form-group" id="addOption" style="display:none">
										<label class="col-sm-2 control-label">添加报名选项</label><font color="red">*</font>
										<div class="col-sm-3">
											<input type="text" class="form-control"  id="OptionTag"  name="OptionTag" value="" placeholder="选项" maxlength="10"></input>
										</div>
										<button class="btn btn-primary" type="button" id="addOptionButton">保  存</button>
									</div>
									
									<div class="form-group">
										<label class="col-sm-2 control-label">设置报名选填项</label>
										<div class="col-sm-6">
											<div id="optionForm">
													<div class="ibox float-e-margins">
															<c:forEach items="${tag }" var="g" varStatus="i">
																<c:if test="${i.count%3==1 }">
																	<div class="ibox-content" style="margin: 5px">
																		<ul class="tag-list" style="padding: 0">
																</c:if>
																<li class="col-sm-3">
																	<div class="checkbox checkbox-info checkbox-inline i-checks">
																		<input type="checkbox" id="inlineCheckbox${i.count }" value="${g.applyConfigName }"  <c:if test="${g.applyConfigName=='姓名' || g.applyConfigName=='手机号'}">disabled=''</c:if> checked>
																		<label for="inlineCheckbox${i.count }"><a style="margin: -3px"
																			><i class="fa fa-tag"></i> ${g.applyConfigName }</a></label>
																	</div>
																</li>
														<c:if test="${i.count%3==0 }">
																	</ul>
														</div>
														</c:if>
														</c:forEach>
														</ul>
														</div>
											
											</div>
											</div>
											</div>
											
											  <div class="btn-group hidden-xs col-sm-2"  role="group">
						                       <button type="button" class="btn btn-default" title="添加报名选项" id="addFlowButton"
						                                    onclick="addFlowProduct()">
						                                <i class="glyphicon glyphicon-plus"></i>
						                      </button>
                        					</div>
										
									</div>
								<div class="form-group">
                                         <div class="col-sm-4 col-sm-offset-3">
                                          <button class="btn btn-primary" type="submit">保  存</button>
                                          &nbsp;<button class="btn btn-info" type="button" onclick="goBackVipActivity()">返  回</button>
                                         </div>
                                    </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="<%=path%>/js/jquery.min.js?v=2.1.4"></script>

<script src="<%=path%>/js/bootstrap.min.js?v=3.3.6"></script>
<!--下拉框-->
<script src="<%=path%>/js/plugins/chosen/chosen.jquery.js"></script>
<!--时间选择-->
<script src="<%=path%>/js/plugins/layer/laydate/laydate.js"></script>
<script src="<%=path%>/js/plugins/ajaxfileupload.js"></script>
<script src="<%=path%>/js/plugins/iCheck/icheck.min.js"></script>
<script src="<%=path%>/js/jquery.serializeObject.js"></script>
<script src="<%=path%>/umeditor/third-party/template.min.js"></script>
<script src="<%=path%>/umeditor/umeditor.config.js"></script>
<script src="<%=path%>/umeditor/umeditor.min.js" type="text/javascript" charset="utf-8"></script>
<script src="<%=path%>/umeditor/lang/zh-cn/zh-cn.js"></script>

<script src="<%=path%>/js/jquery.validate.js"></script>
<script>
var um = UM.getEditor('details', {
	fullscreen : false,
	toolbar:[
        'source | undo redo | bold italic underline strikethrough | superscript subscript | forecolor backcolor | removeformat |',
        'insertorderedlist insertunorderedlist | selectall cleardoc paragraph | fontfamily fontsize' ,
        '| justifyleft justifycenter justifyright justifyjustify |',
        'link unlink | emotion image',
        '| horizontal preview'
    ]
});
um.disable();
function validateImg() {
	var img = $("#picture").val().toLowerCase().split('.');
	var flage=false;
	if (img == '') {
		flage=false
	} else {
		if (img[img.length - 1] == 'gif' || img[img.length - 1] == 'jpg'|| img[img.length - 1] == 'jpeg'|| img[img.length - 1] == 'png') {
			flage=true;
		} else {
			$("#imgHint").html("上传图片格式不对");
			$("#picture").val("");
			flage=false;
		}
	}
	
	if(flage){
		$.ajaxFileUpload({
			url : '<%=path%>/activity/ningFileUpload', // 用于文件上传的服务器端请求地址
			type : 'post',
			data : {
				"extension" : ".png,.jpg,.jpeg"
			}, // JSON格式
			secureuri : false, // 一般设置为false
			fileElementId : 'picture', // 文件上传空间的id属性 <input type="file" id="file" name="file" />
			dataType : 'json', // 返回值类型 一般设置为json
			global : true,
			success : function(response, status) { // 服务器成功响应处理函数
			  if (response.status==200) {
				  $("#headPortrait").val(response.data);
				  $("#imgx").attr("src",response.data);
					
				} 
			},
			error : function(data, status, e) {// 服务器响应失败处理函数
				/* _showInfoMessage(e, 'error'); */
			}
		});
	}
	
}
	//表单验证
	var config = {
		".chosen-select" : {},
		".chosen-select-deselect" : {
			allow_single_deselect : !0
		},
		".chosen-select-no-single" : {
			disable_search_threshold : 10
		},
		".chosen-select-no-results" : {
			no_results_text : "Oops, nothing found!"
		},
		".chosen-select-width" : {
			width : "95%"
		}
	};
	
	var list=[];
	 <c:forEach items="${tag }" var="electVar">
	list.push("${electVar['applyConfigCode']}");
	</c:forEach> 
	$('#addOptionButton').on("click", function (){
		var OptionTag=$("#OptionTag").val();
		if(OptionTag){
			$("#addOption").hide();
			var changdu=list.length+1;
			$("#optionForm  ul").last().append(
					'<li class="col-sm-3">'+
					'<div class="checkbox checkbox-warning checkbox-inline ">'+
						'<input type="checkbox" id="inlineCheckbox'+(changdu)+'" value="'+OptionTag+'">'+
						'<label for="inlineCheckbox'+(changdu)+'"><a style="margin: -3px"><i class="fa fa-tag"></i> '+OptionTag+'</a></label>'+
					'</div>'+
				'</li>'	
			)
			list.push(OptionTag);
		}
	})
	var tagId=[];
	var addFlowProduct=function(){
		$("#addOption").show();
	}
	
	var saveAllTage=function(){
		
		for(var i=0;i<=list.length;i++){
			if($('#inlineCheckbox'+i+'').is(':checked')) {
				var id=$('#inlineCheckbox'+i+'').val();
				tagId.push(id);
				}
			};
		$("#OptionTag").val(tagId);
		$("input[type=checkbox]").hide();
	}

	for ( var selector in config)
		$(selector).chosen(config[selector]);
	$(document).ready(function() {
		$("#vipActivityForm").validate({
    		rules: {
    			title: {
    				required: true,
    				rangelength:[5,20]
    			},
    			beginTime: {
    				required: true,
    			},
    			endTime: {
    				required: true,
    				
    			},
    			address: {
    				required: true,
    				
    			},
    			joinNum: {
    				required: true,
    				
    			}
    		},
    		messages:{
    			title:{
    				required: "用户名不能为空"
    			},
    			beginTime:{
    				required: "开始时间不能为空"
    			},
    			endTime:{
    				required: "结束时间不能为空"
    			},
    			address:{
    				required: "地址不能为空"
    			},
    			joinNum:{
    				required: "参加人数不能为空"
    			}
    		
    		},
    		errorPlacement: function(error, element) {
    			$( element ).closest( "form" ).find( "span[id='error_" + element.attr( "name" ) + "']" ).append( error );
    		},
    	    onkeyup: false,
    		submitHandler:function(){
    			var roleForm = $("#vipActivityForm").serializeObject();
    			var jsonData={"tag":tagId};
    			 var params = $.extend(true, jsonData, roleForm); 
    			jQuery.ajax({
    				type: "post",
    			    url: "<%=path%>/activity/toUpdateActivityApply",
    			    contentType: "application/json",
    			    data: JSON.stringify(params),
    			    beforeSend:function() {
    			    	$("#progress").modal();
    			    	$("#loading").html("正在提交用戶数据，请稍候...");

    			    },
    			    complete:function(data) {
    			    	$("#progress").modal('hide');
    			    	$("#loading").html("");
    			    }, 
    			    success: function (data) {
    			    	if(data.status==200){
    			    		parent.layer.msg("保存数据信息成功!",{time: 500},function(){goBackVipActivity();});
    			    	}else{
    			    		parent.layer.msg("保存数据信息失败!");			    		
    			    	}
    			    },
    			    error: function () {
    			    	parent.layer.msg("保存数据信息失败,请联系管理员!");
    			    }	
    			});
    		}
    		
    	}); 
	});
	
	//日期选择框
	var start = {
		elem : "#beginTime",
		format : "YYYY-MM-DD hh:mm:ss",
		min : laydate.now(),
		max : "2099-06-16",
		istime : true,
		istoday : false,
		choose : function(datas) {
			end.min = datas;
			end.start = datas
		}
	};
	var end = {
		elem : "#endTime",
		format : "YYYY-MM-DD hh:mm:ss",
		min : start,
		max : "2099-06-16",
		istime : true,
		istoday : false,
		choose : function(datas) {
			start.max = datas
		}
	};
	laydate(start);
	laydate(end);


	function goBackVipActivity() {
		window.location.href = "<%=path%>/activity/toApplyPage";
    }
</script>
</body>
</html>
